<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-input
						v-model="searchForm.context"
						placeholder="内容"
						clearable
				>
				</el-input>
			</el-form-item>

			<el-form-item>
				<el-button @click="getUserList">搜索</el-button>
			</el-form-item>

		</el-form>

		<el-table
				ref="multipleTable"
				:data="tableData"
				tooltip-effect="dark"
				style="width: 100%"
				border:false
				stripe>


			<el-table-column
					label="头像"
					width="50">
				<template slot-scope="scope">
					<el-avatar size="small" :src="scope.row.client.avatar"></el-avatar>
				</template>
			</el-table-column>

			<el-table-column
					prop="clientId"
					label="用户名"
					width="120">
					<template slot-scope="scope">
					{{ scope.row.client.username }}
				</template>
			</el-table-column>
			<el-table-column
					prop="title"
					label="标题">
			</el-table-column>

			<el-table-column
					prop="state"
					label="状态">
				<template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.state === 1" type="success">已通过</el-tag>
					<el-tag size="small" v-else-if="scope.row.state === 0" type="warning">待审核</el-tag>
					<el-tag size="small" v-else-if="scope.row.state === 2" type="danger">未通过</el-tag>
				</template>

			</el-table-column>
			<el-table-column
					prop="commitTime"
					width="200"
					label="提交日期"
			>
			</el-table-column>
			<el-table-column
					prop="icon"
					width="260px"
					label="操作">

				<template slot-scope="scope">
					<el-button type="text" @click="show(scope.row.id)">查看</el-button>

					<!-- <template>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
					</template> -->

				</template>
			</el-table-column>

		</el-table>

		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[10, 20, 50, 100]"
				:current-page="current"
				:page-size="size"
				:total="total">
		</el-pagination>


		<!--新增对话框-->
		<el-dialog
				:title=art.title
				center
				:data="art"
				:visible.sync="dialogVisible"
				width="600px">
			<p>简介：{{ art.intro }}</p>
			<p>详情：{{ art.context }}</p>
			<div slot="footer" >
				<el-button @click="judgeHandle(2)" >否 决</el-button>
				<el-button type="primary" @click="judgeHandle(1)">通 过</el-button>
			</div>
		</el-dialog>


	</div>
</template>

<script>
import { json } from 'body-parser'

	export default {
		name: "Judge",
		data() {
			return {
				searchForm: {},

				total: 0,
				size: 10,
				current: 1,
				intro:"",
				context:"asdasdas",
				dialogVisible: false,
				tableData: [],
				clientData:[],
				art:[]

			}
		},
		created() {
			this.getUserList()
			/* this.$axios.get("/user").then(res => {
				this.tableData = res.data.data
			}) */
			
		},
		methods: {
			show(id){
				this.dialogVisible = true
				this.$axios.get("/article/"+id).then(ref =>{
					this.art = ref.data.data
				})
				console.log(this.art)
			},

			judgeHandle(judge){
				this.art.state = judge
				this.$axios.post("/article/",this.art).then(ref =>{
					this.dialogVisible = false
					this.getUserList();
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getUserList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
				this.getUserList()
			},

			getUserList() {
				this.$axios.get("/article/page", {
					params: {
						context: this.searchForm.context,
						pageNum: this.current,
						pageSize: this.size
					}
				}).then(res => {
					this.tableData = res.data.data.records
					this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
				})
			}
		},
		
	}
</script>

<style scoped>

	.el-pagination {
		float: right;
		margin-top: 22px;
	}

</style>